<template>
  <view class="piclist">
    <custom-head-top>
      <template #left>壁纸列表</template>
      <template #right>
        <!-- <uni-data-select
          style="width: 200px"
          placeholder="请选择分类"
        ></uni-data-select> -->
        <uni-data-select
          placeholder="请选择分类"
          style="width: 200px"
          ref="selectRef"
          collection="dc-bizhi-classify"
          field="_id as value, name as text ,sort"
          :where="`enable==true`"
          orderby="sort asc"
          clear
          v-model="classify"
          @change="handleClassifyChange"
        ></uni-data-select>
        <button type="primary" size="mini" @click="handleAdd">
          <uni-icons type="plusempty" size="14" color="#fff"></uni-icons>
          新增壁纸
        </button>
      </template>
    </custom-head-top>
    <view class="mian">
      <uni-table
        border
        stripe
        emptyText="暂无更多数据"
        type="selection"
        @selection-change="selectChange"
        ref="tableRef"
      >
        <!-- 表头行 -->
        <uni-tr>
          <uni-th align="left" width="150">缩略图</uni-th>
          <uni-th align="left">分类</uni-th>
          <uni-th align="left">评分</uni-th>
          <uni-th align="left">评分数</uni-th>
          <uni-th align="left" sortable @sortChange="downloadSortChange"
            >下载数</uni-th
          >
          <uni-th align="left" sortable @sortChange="viewSortChange"
            >阅读数</uni-th
          >
          <uni-th align="left">是否可见</uni-th>
          <uni-th align="left">发布人</uni-th>
          <uni-th align="left">发布时间</uni-th>
          <uni-th align="left">操作</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="item in picList" :key="item._id">
          <uni-td class="thumb">
            <image @click="previewImage(item.picurl)" :src="getSmallImage(item.picurl)" mode="aspectFill"></image>
          </uni-td>
          <uni-td>{{ item.classname[0] }}</uni-td>
          <uni-td>
            <view style="display: flex; align-items: center">
              <uni-rate v-model="item.score" :max="5" readonly />
              {{ item.score ?? '--' }}</view
            >
          </uni-td>
          <uni-td>{{ item.score_count ?? '--' }}</uni-td>
          <uni-td>{{ item.download_count ?? '--' }}</uni-td>
          <uni-td>{{ item.view_count ?? '--' }}</uni-td>
          <uni-td>
            <switch :checked="item.checked" class="switch-btn" />
          </uni-td>
          <uni-td>{{ item.nickname[0] }}</uni-td>
          <uni-td>{{
            dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
          }}</uni-td>
          <uni-td width="180">
            <view class="operate-btn">
              <button
                type="primary"
                size="mini"
                plain
                @click="handleEdit(item._id)"
              >
                修改
              </button>
              <button
                type="warn"
                size="mini"
                plain
                @click="handleDelete([item._id])"
              >
                删除
              </button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <view class="paging">
      <uni-pagination
        :total="params.total"
        :page-size="params.pageSize"
        :current="params.currentPage"
        @change="handlePageChange"
        :show-icon="true"
      />
    </view>
    <piclistPopup ref="piclistPopupRef" v-model:item="itemData" @success="getPicList" />
  </view>
</template>

<script setup>
import customHeadTop from '@/components/cunstom-head-top/custom-head-top.vue';
import { ref, onMounted } from 'vue';
import { routerTo } from '@/utils/common';
import dayjs from 'dayjs';
import { getSmallImage } from '../../utils/tools';
import { showModal, showToast, previewImage } from '@/utils/common';
import piclistPopup from './children/piclistPopup.vue';
const picCloudObj = uniCloud.importObject('admin-bizhi-picture');
const piclistPopupRef = ref(null);
const handleAdd = () => {
  routerTo('/pages/bizhi/picadd');
};
const picList = ref([]);
const classify = ref('');
const selectRef = ref(null);
const itemData = ref({});
const params = ref({
  total: 0,
  currentPage: 1,
  pageSize: 5,
  viewSort: '',
  downloadSort: '',
  classid: '',
});
const handlePageChange = (e) => {
  params.value.currentPage = e.current;
  getPicList();
};
const getPicList = async () => {
  const res = await picCloudObj.list(params.value);
  console.log("🌺 ~ getPicList ~ res:🌳", res)
  picList.value = res.data;
  params.value.total = res.count;
};

onMounted(() => {
  selectRef.value.clearVal();
});

const handleDelete = async (ids) => {
  uni.showLoading({
    title: '删除中...',
    mask: true,
  });
  const res = await showModal({
    content: '确定删除吗？',
  });
  if (res === 'confirm') {
    const result = await picCloudObj.remove(ids);
    if (result.code === 0) {
      showToast({
        title: '删除成功',
      });
      setTimeout(() => {
        getPicList();
      }, 1000);
    } else {
      showToast({
        title: result.errMsg,
      });
    }
  }
};
const handleEdit = async(id) => {
  //itemData.value = item;
  let res = await picCloudObj.item(id);
  if(res.errCode === 0){
    itemData.value = {...res.data,tempurl:res.data.picurl}
    piclistPopupRef.value.open();
  }else{
    showToast({
      title: res.errMsg,
    });
  }
};


const downloadSortChange = (e) => {
  params.value.downloadSort =
    e.order === 'ascending' ? 'asc' : e.order === 'descending' ? 'desc' : '';
  getPicList();
};
const viewSortChange = (e) => {
  params.value.viewSort =
    e.order === 'ascending' ? 'asc' : e.order === 'descending' ? 'desc' : '';
  getPicList();
};

const handleClassifyChange = (e) => {
  params.value.classid = e;
  params.value.currentPage =1
  console.log("🌺 ~ handleClassifyChange ~ params.value.currentPage:🌳", params.value.currentPage)
  getPicList();
};

const selectChange = (e) => {
  console.log(e);
};


</script>

<style lang="less" scoped>
.thumb {
  image {
    width: 45px;
    height: 100px;
  }
}
</style>
